<template>
  <view>
    <view style="background: linear-gradient(to right, #119FAF, #41C69E);height: 300upx" />
    <view style="background-color: #F8F8F8;display: flex;justify-content: center;">
      <view style="width: 90%;margin-top: -150upx;">
        <!-- 第一个卡片 -->
        <view class="card">
          <view style="padding: 30upx;">
            <view style="display: flex;justify-content: center;">
              <view>
                <view style="margin-top: -80upx;">
                  <u-avatar :src="healthy.avatar" size="65"></u-avatar>
                </view>
                <view style="padding-top: 20upx;font-weight: bold;">{{healthy.memberName}}</view>
              </view>
            </view>
            <view style="padding-top:20upx; display: flex;justify-content: space-around;">
              <view>
                <view style="display: flex;justify-content: center;"><u-icon name="chat" size="30"></u-icon></view>
                <view
                  style="display: flex;justify-content: center;padding-top: 10upx;font-weight: bold;color: #858585;font-size: 30upx;">
                  评论数{{healthy.commentTotal}}</view>
              </view>
              <view>
                <view style="display: flex;justify-content: center;"><u-icon name="file-text" size="30"></u-icon></view>
                <view
                  style="display: flex;justify-content: center;padding-top: 10upx;font-weight: bold;color: #858585;font-size: 30upx;">
                  已服务{{healthy.servicesTotal}}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 核酸检测 -->
        <view class="card">
          <view style="padding: 30upx;">
            <view>
              <view class="title">{{'核酸检测'}}</view>
            </view>
            <view class="card-item">
              <view style="font-size: 32upx;">{{'检测核酸结果' + (healthy.nucleicAcid ? '正常' : '异常')}}</view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">
                  {{healthy.nucleicAcid ? '已通过' : '未通过'}}
                </view>
                <u-icon :name="healthy.nucleicAcid ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>

        <!-- 新冠疫苗接种情况-->
        <view class="card">
          <view style="padding: 30upx;">
            <view>
              <view class="title">{{'新冠疫苗接种情况'}}</view>
            </view>
            <view class="card-item">
              <view>
                <view style="font-size: 35upx;font-weight: bold;">{{'已接种两次'}}</view>
                <view style="font-size: 32upx;padding-top: 10upx;">
                  {{'检测核酸结果' + (healthy.novelCoronavirus ? '正常' : '异常')}}
                </view>
              </view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.novelCoronavirus ? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.novelCoronavirus ? 'checkmark-circle' : 'close-circle'" size="32"
                  color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>

        <!-- 近期体温情况 -->
        <view class="card">
          <view style="padding: 30upx;">
            <view>
              <view class="title">{{'近期体温情况'}}</view>
            </view>
            <view class="card-item">
              <view>
                <view style="font-size: 35upx;font-weight: bold;">{{'体温(37.5℃之下)'}}</view>
                <view style="font-size: 32upx;padding-top: 10upx;">
                  {{'更新 ' + parseTime(new Date())}}
                </view>
              </view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.temperature? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.temperature ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>

        <!-- 接触史 -->
        <view class="card">
          <view style="padding: 30upx;">
            <view>
              <view class="title">{{'接触史'}}</view>
            </view>
            <view class="card-item">
              <view>
                <view style="font-size: 32upx;padding-top: 10upx;">
                  {{'更新 ' + parseTime(new Date())}}
                </view>
              </view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.contact? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.contact ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>

        <!-- 行程 -->
        <view class="card">
          <view style="padding: 30upx;">
            <view>
              <view class="title">{{'行程'}}</view>
            </view>
            <view class="card-item">
              <view>
                <view style="font-size: 35upx;font-weight: bold;">{{'无疫区停留和途经史'}}</view>
                <view style="font-size: 32upx;padding-top: 10upx;">
                  {{'更新 ' + parseTime(new Date())}}
                </view>
              </view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.trip? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.trip ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>


        <!-- 技师信息核验 -->
        <view class="card">
          <view style="padding: 30upx">
            <view class="title">
              <view>{{'技师信息核验'}}</view>
            </view>
            <view class="card-item-1">
              <view class="card-item-title">{{'身份认证'}}</view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.identity? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.identity ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
            <view class="card-item-1">
              <view class="card-item-title">{{'背景调查'}}</view>
              <view style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.background? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.background ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
            <view class="card-item-1">
              <view class="card-item-title">{{'专业培训'}}</view>
              <view  style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.major? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.major ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
            <view class="card-item-1">
              <view class="card-item-title">{{'健康证'}}</view>
              <view  style="display: flex;align-items: center;">
                <view class="is-pass">{{healthy.healthy? '已通过' : '未通过'}}</view>
                <u-icon :name="healthy.healthy ? 'checkmark-circle' : 'close-circle'" size="32" color="#1AB0BE" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>


<script>
  import {
    getHealthy
  } from '../../api/technician.js'
  import {
    parseTime
  } from '../../utils/common.js'
  export default {
    onLoad(option) {
      this.id = option.id
      this.getHealthyHandle()
      this.getProjectList()
    },
    data() {
      return {
        id: undefined,
        healthy: {},
        projectArr: []
      }
    },
    methods: {
      parseTime,
      getHealthyHandle() {
        const that = this
        getHealthy(this.id).then(res => {
          that.healthy = res.data
        })
      }
      
    }
  }
</script>

<style>
  .card {
    background-color: #fff;
    border-radius: 30upx;
    margin-bottom: 30upx;
  }

  .title {
    color: #1AB0BE;
    font-size: 35upx;
    font-weight: bold;
  }

  .card-item {
    padding-top: 50upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-item-1 {
    padding-top: 20upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-item-title {
    font-size: 35upx;
    font-weight: bold;
  }

  .is-pass {
    font-size: 38upx;
    color: #1AB0BE;
    font-weight: bold;
    padding-right: 10upx;
  }
</style>
